<template>
    <div>
      <!-- 搜索框 -->
      <div style="padding: 10px 0">
        <el-input style="width: 200px" placeholder="请输入用户名" v-model="param.nickname"></el-input>
  
        <el-input style="width: 200px" class="ml-5" placeholder="请输入资产名称" v-model="param.propertyName"></el-input>
        <el-button @click="load" class="ml-5" type="primary">搜索</el-button>
        <i>
          <el-button class="ml-5" @click="reset" type="warning">重置</el-button>
        </i>
      </div>
      <!-- 搜索框 -->
      <!-- 增加与删除 -->
      <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAdd">
          新增家庭资产
          <i class="el-icon-circle-plus-outline"></i>
        </el-button>
        <el-popconfirm class="ml-5" confirm-button-text="確定" cancel-button-text="我在想想" icon="el-icon-info"
          icon-color="red" title="您確定批量删除數據吗？" @confirm="delBatch">
          <el-button type="danger" slot="reference">
            批量删除
            <i class="el-icon-remove-outline"></i>
          </el-button>
        </el-popconfirm>
      </div>
      <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange">
        >
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
        <el-table-column align="center" prop="nickName" label="用户名"></el-table-column>
        <el-table-column align="center" prop="propertyName" label="资产名称"></el-table-column>
        <el-table-column align="center" prop="money" label="余额"></el-table-column>
        <el-table-column align="center" prop="notes" label="备注"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
  
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="success">
              编辑
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button @click="del(scope.row.id)" type="danger">
              删除
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div style="padding: 10px 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="param.pageNum"
          :page-sizes="[2, 5, 10]" :page-size="param.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="param.total"></el-pagination>
      </div>
  
      <!-- 编辑弹窗 -->
      <el-dialog title="活期资产" :visible.sync="dialogFormVisible" width="35%">
        <el-form label-width="100px" size="smail">
          <el-form-item label="用户名">
            <el-select v-model="form.nickName" placeholder="请选择" @change="changeSelect">
              <el-option v-for="(item, index) in userData" :key="item.id" :label="item.nickname" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资产名称">
            <el-input v-model="form.propertyName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="余额">
            <el-input v-model="form.money" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.notes" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div> 
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getPropertyPage, updateProperty, delPropertyBatch, delPropertyByid } from '@/api/admin/property/Property.js';
  import { getAllUser } from '../../api/admin/user/User'
  export default {
    data() {
      return {
        tableData: [],
        param: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          nickname: "",
          propertyName: "",
        },
        dialogFormVisible: false, //默认不展示 
        form: {},
        user: {},
        multipleSelection: [], //批量刪除
        user: JSON.parse(localStorage.getItem("adminInfo")),
        avatarUrl: "",
        userData: []
      };
    },
    created() {
      //请求分页查询数据
      this.load();
      this.userAllLoad()
    },
    methods: {
      changeSelect(item) {
      // 获取选中的用户信息
      this.userData.forEach(element => {
        if(element.id === item){
          this.form.userId = element.id
          this.form.nickName = element.nickname
        }
      });
    },
    userAllLoad() {
      getAllUser().then(res => {
        this.userData = res.data
      })
    },
      load() {
        getPropertyPage(this.param).then(response => {
          console.log(response);
          this.tableData = response.data.records;
          this.param.total = response.data.total;
        })
      },
      save() {
        //增加管理员
        updateProperty(this.form).then(response => {
          if (response.code === "200") {
            this.$message.success("保存成功");
            this.dialogFormVisible = false;
            this.$emit("refreshUser");
            this.load(); //刷新数据
          } else {
            this.$message.error("保存失败");
          }
        })
      },
      handleAdd() {
        //增加管理员
        this.dialogFormVisible = true;
        this.form = {};
      },
  
      handleEdit(row) {
        //修改管理员
        this.form = row;
        this.dialogFormVisible = true;
      },
      //批量刪除
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量刪除
      delBatch() {
        let ids = this.multipleSelection.map(v => v.id);
        delPropertyBatch(ids).then(res => {
          if (res.code === "200") {
            this.$message.success("批量删除成功");
            this.load(); //刷新数据
          } else {
            this.$message.error("批量删除失败");
          }
        })
      },
      //删除用户
      del(id) {
        delPropertyByid(id).then(res => {
          if (res.code === "200") {
            this.$message.success("删除成功");
            this.load(); //刷新数据
          } else {
            this.$message.error("删除失败");
          }
        })
      },
      //重置按钮
      reset() {
        this.param = {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          nickname: "",
          propertyName: ""
        }
        this.load()
      },
      //绑定分页
      handleSizeChange(pageSize) {
        this.param.pageSize = pageSize;
        this.load();
      },
      //绑定分页
      handleCurrentChange(pageNum) {
        this.param.pageNum = pageNum;
        this.load();
      },
    }
  };
  </script>
  
  <style>
  .headerBg {
    background-color: #eee !important;
  }
  
  .person {
    width: 50px;
    height: 50px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 138px;
    height: 138px;
    line-height: 138px !important;
  }
  </style>
  